<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta name="description" content="网站描述" />
    <title>德州扑克</title>
    <link rel="icon" href="images/favicon.ico">
    <link rel="stylesheet" href="css/main.css" />
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script> -->
    <script src="http://localhost:3000/socket.io/socket.io.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
    <script src="js/holdem.js"></script>
</head>
<!-- 要用个小d图标形容庄家位 -->

<body>
<div class="wrapper">
    <!-- 页眉 -->
    <header class="header">
        <button class="chat__tag" style="margin-left: 0.5rem;margin-top: 0.5rem;" onclick="showRoomInfo()">战绩</button>
        <button class="chat__tag" id="btnExit" style="margin-top: -8.4%;margin-left: 13rem;" onclick="exitfoSwitch()">托管</button>

    </header>
    <!-- 上 -->
    <div class="top">
        <!-- 个人状态 -->
        <!-- 其中包括
        status__info--bet(下注)
        status__info--call(跟注)
        status__info--raise(加注)
        status__info--fold(弃牌)
        status__info--all-in(all-in)
        status__info--free(免费)
        status__info--wait(等待，有人新进来)
    -->
        <div class="status status--5">
            <!-- 名字，头像，剩下的筹码 -->
            <div class="status__info--big">


                <div style="position: relative;">
                    <div class="status__chat" style="
                        position: absolute;
                        top: -1rem;
                        left: 0;
                        display: none;
                        background-color: rgba(0, 0, 0, 0.5);
                        font-size: 0.6rem;
                        color:white;
                        padding: 0.2rem 0.5rem;
                        border-radius: 0.2rem;"></div>
                </div>
                <div class="status__name"></div>

                <img class="status__avatar" src="./images/null.png" alt="">
                <div class="status__chips--Leftover"></div>
                <img onclick="submitStartGame()" class="status__dealer" src="./images/dealer.png" alt="">
            </div>
            <div style="margin-left: 0rem;margin-top: -2.6rem;" id="4_flop">
                <!--<div class="1_1_flop" style="font-size: 0.6rem;color: white;display: inline">33</div>
                <div class="1_2_flop" style="font-size: 0.6rem;color: white;display: inline">44</div>-->
            </div>

            <!-- 概述，投入的筹码，庄家标准 -->
            <div class="status__info--small" style="margin-left: 2rem;margin-top: -0.8rem;">

                <div class="status__resume status__bet">下 注</div>
                <div class="status__resume status__call">跟 注</div>
                <div class="status__resume status__raise">加 注</div>
                <div class="status__resume status__fold">弃 牌</div>
                <div class="status__resume status__all-in">All in</div>
                <div class="status__resume status__free">过 牌</div>
                <div class="status__resume status__wait">等 待</div>
                <div class="status__chips--invested">
                    <img class="status__icon" src="./images/texas_chip.png" alt="">
                    <span class="status__number"></span>
                </div>
            </div>
        </div>
        <div class="status status--6">
            <!-- 概述，投入的筹码，庄家标准 -->
            <div class="status__info--small">

                <div class="status__resume status__bet">下 注</div>
                <div class="status__resume status__call">跟 注</div>
                <div class="status__resume status__raise">加 注</div>
                <div class="status__resume status__fold">弃 牌</div>
                <div class="status__resume status__all-in">All in</div>
                <div class="status__resume status__free">过 牌</div>
                <div class="status__resume status__wait">等 待</div>

                <div class="status__chips--invested">
                    <img class="status__icon" src="./images/texas_chip.png" alt="">
                    <span class="status__number"></span>
                </div>
            </div>
            <div style="margin-left: 2.3rem;margin-top: -2.6rem;position: absolute" id="5_flop">
                <!--<div class="2_1_flop" style="font-size: 0.6rem;color: white;display: inline">33</div>
                <div class="2_2_flop" style="font-size: 0.6rem;color: white;display: inline">44</div>-->
            </div>
            <!-- 名字，头像，剩下的筹码 -->
            <div class="status__info--big">


                <div style="position: relative;">
                    <div class="status__chat" style="
                        position: absolute;
                        top: -1rem;
                        left: 0;
                        display: none;
                        background-color: rgba(0, 0, 0, 0.5);
                        font-size: 0.6rem;
                        color:white;
                        padding: 0.2rem 0.5rem;
                        border-radius: 0.2rem;"></div>
                </div>
                <div class="status__name"></div>

                <img class="status__avatar" src="./images/null.png" alt="">
                <div class="status__chips--Leftover"></div>
                <!-- status__dealer--hook代表显示庄 -->
                <img onclick="submitStartGame()" class="status__dealer" src="./images/dealer.png" alt="">
            </div>
        </div>
    </div>

    <div class="middle">
        <!-- 右 -->
        <div class="left">
            <div class="status status--4">
                <div style="margin-top: 0.8rem;position: absolute;" id="3_flop">
                    <!--<div class="3_1_flop" style="font-size: 0.6rem;color: white;display: inline">33</div>
                    <div class="3_2_flop" style="font-size: 0.6rem;color: white;display: inline">44</div>-->
                </div>
                <!-- 名字，头像，剩下的筹码 -->
                <div class="status__info--big">


                    <div style="position: relative;">
                        <div class="status__chat" style="
                        position: absolute;
                        top: -1rem;
                        left: 0;
                        display: none;
                        background-color: rgba(0, 0, 0, 0.5);
                        font-size: 0.6rem;
                        color:white;
                        padding: 0.2rem 0.5rem;
                        border-radius: 0.2rem;"></div>
                    </div>
                    <div class="status__name"></div>

                    <img class="status__avatar" src="./images/null.png" alt="">
                    <div class="status__chips--Leftover"></div>
                    <img onclick="submitStartGame()" class="status__dealer" src="./images/dealer.png" alt="">
                </div>
                <!-- 概述，投入的筹码，庄家标准 -->
                <div class="status__info--small">

                    <div class="status__resume status__bet">下 注</div>
                    <div class="status__resume status__call">跟 注</div>
                    <div class="status__resume status__raise">加 注</div>
                    <div class="status__resume status__fold">弃 牌</div>
                    <div class="status__resume status__all-in">All in</div>
                    <div class="status__resume status__free">过 牌</div>
                    <div class="status__resume status__wait">等 待</div>
                    <div class="status__chips--invested">
                        <img class="status__icon" src="./images/texas_chip.png" alt="">
                        <span class="status__number"></span>
                    </div>
                </div>
            </div>
            <div class="status status--3">
                <div style="margin-top: 0.8rem;position: absolute;" id="2_flop">
                    <!--<div class="4_1_flop" style="font-size: 0.6rem;color: white;display: inline">33</div>
                    <div class="4_2_flop" style="font-size: 0.6rem;color: white;display: inline">44</div>-->
                </div>
                <!-- 名字，头像，剩下的筹码 -->
                <div class="status__info--big">


                    <div style="position: relative;">
                        <div class="status__chat" style="
                        position: absolute;
                        top: -1rem;
                        left: 0;
                        display: none;
                        background-color: rgba(0, 0, 0, 0.5);
                        font-size: 0.6rem;
                        color:white;
                        padding: 0.2rem 0.5rem;
                        border-radius: 0.2rem;"></div>
                    </div>
                    <div class="status__name"></div>

                    <img class="status__avatar" src="./images/null.png" alt="">
                    <div class="status__chips--Leftover"></div>
                    <img onclick="submitStartGame()" class="status__dealer" src="./images/dealer.png" alt="">
                </div>
                <!-- 概述，投入的筹码，庄家标准 -->
                <div class="status__info--small">

                    <div class="status__resume status__bet">下 注</div>
                    <div class="status__resume status__call">跟 注</div>
                    <div class="status__resume status__raise">加 注</div>
                    <div class="status__resume status__fold">弃 牌</div>
                    <div class="status__resume status__all-in">All in</div>
                    <div class="status__resume status__free">过 牌</div>
                    <div class="status__resume status__wait">等 待</div>
                    <div class="status__chips--invested">
                        <img class="status__icon" src="./images/texas_chip.png" alt="">
                        <span class="status__number"></span>
                    </div>
                </div>
            </div>
            <div class="status status--2">
                <div style="margin-top: 0.8rem;position: absolute;" id="1_flop">
                    <!--<div class="5_1_flop" style="font-size: 0.6rem;color: white;display: inline">33</div>
                    <div class="5_2_flop" style="font-size: 0.6rem;color: white;display: inline">44</div>-->
                </div>
                <!-- 名字，头像，剩下的筹码 -->
                <div class="status__info--big">


                    <div style="position: relative;">
                        <div class="status__chat" style="
                        position: absolute;
                        top: -1rem;
                        left: 0;
                        display: none;
                        background-color: rgba(0, 0, 0, 0.5);
                        font-size: 0.6rem;
                        color:white;
                        padding: 0.2rem 0.5rem;
                        border-radius: 0.2rem;"></div>
                    </div>
                    <div class="status__name"></div>

                    <img class="status__avatar" src="./images/null.png" alt="">
                    <div class="status__chips--Leftover"></div>
                    <img onclick="submitStartGame()" class="status__dealer" src="./images/dealer.png" alt="">
                </div>
                <!-- 概述，投入的筹码，庄家标准 -->
                <div class="status__info--small">

                    <div class="status__resume status__bet">下 注</div>
                    <div class="status__resume status__call">跟 注</div>
                    <div class="status__resume status__raise">加 注</div>
                    <div class="status__resume status__fold">弃 牌</div>
                    <div class="status__resume status__all-in">All in</div>
                    <div class="status__resume status__free">过 牌</div>
                    <div class="status__resume status__wait">等 待</div>
                    <div class="status__chips--invested">
                        <img class="status__icon" src="./images/texas_chip.png" alt="">
                        <span class="status__number"></span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 中（公共） -->
        <div class="center">
            <div class="center__pot">
<!--                <span class="center__pot&#45;&#45;text" style="margin-left: 38%;"></span>-->
                <span class="center__pot--text" ></span>
                <div class="outs" style="margin-top: 0.5rem;margin-left: 0rem">
                    <table id="outsTab">
                    </table>
                </div>
            </div>

            <ul class="center__items--img">
                <li class="center__item--img" style="margin-left: 2rem;margin-right: 0.5rem;"><img class="center__img" src="" alt=""></li>
                <li class="center__item--img" style="margin-right: 0.5rem;"><img class="center__img" src="" alt=""></li>
                <li class="center__item--img"><img class="center__img" src="" alt=""></li>
                <li class="center__item--img" style="margin-left: 3.25rem;margin-right: 0.5rem;"><img class="center__img" src="" alt=""></li>
                <li class="center__item--img"><img class="center__img" src="" alt=""></li>
            </ul>
            <ul class="center__items--text">
                <li class="center__item--text center__item--room-number"></li>
                <li class="center__item--text center__item--ante"></li>
                <li class="center__item--text center__item--Insurance"></li>
            </ul>
        </div>
        <!-- 右 -->
        <div class="right">

            <div class="status status--7">
                <div class="status__info--small">

                    <div class="status__resume status__bet">下 注</div>
                    <div class="status__resume status__call">跟 注</div>
                    <div class="status__resume status__raise">加 注</div>
                    <div class="status__resume status__fold">弃 牌</div>
                    <div class="status__resume status__all-in">All in</div>
                    <div class="status__resume status__free">过 牌</div>
                    <div class="status__resume status__wait">等 待</div>
                    <div class="status__chips--invested">
                        <img class="status__icon" src="./images/texas_chip.png" alt="">
                        <span class="status__number"></span>
                    </div>
                </div>
                <div style="margin-left: 2.3rem;position: absolute;margin-top: -2.6rem;" id="6_flop">
                    <!--<div class="6_1_flop" style="font-size: 0.6rem;color: white;display: inline">33</div>
                    <div class="6_2_flop" style="font-size: 0.6rem;color: white;display: inline">44</div>-->
                </div>
                <!-- 名字，头像，剩下的筹码 -->
                <div class="status__info--big">
                    <div style="position: relative;">
                        <div class="status__chat" style="
                        position: absolute;
                        top: -1rem;
                        right: 0;
                        display: none;
                        background-color: rgba(0, 0, 0, 0.5);
                        font-size: 0.6rem;
                        color:white;
                        padding: 0.2rem 0.5rem;
                        border-radius: 0.2rem;"></div>
                    </div>
                    <div class="status__name"></div>

                    <img class="status__avatar" src="./images/null.png" alt="">
                    <div class="status__chips--Leftover"></div>
                    <img onclick="submitStartGame()" class="status__dealer" src="./images/dealer.png" alt="">
                </div>

            </div>
            <div class="status status--8">
                <div class="status__info--small">

                    <div class="status__resume status__bet">下 注</div>
                    <div class="status__resume status__call">跟 注</div>
                    <div class="status__resume status__raise">加 注</div>
                    <div class="status__resume status__fold">弃 牌</div>
                    <div class="status__resume status__all-in">All in</div>
                    <div class="status__resume status__free">过 牌</div>
                    <div class="status__resume status__wait">等 待</div>
                    <div class="status__chips--invested">
                        <img class="status__icon" src="./images/texas_chip.png" alt="">
                        <span class="status__number"></span>
                    </div>
                </div>
                <div style="margin-left: 2.3rem;position: absolute;margin-top: -2.6rem;" id="7_flop">
                    <!--<div class="7_1_flop" style="font-size: 0.6rem;color: white;display: inline">33</div>
                    <div class="7_2_flop" style="font-size: 0.6rem;color: white;display: inline">44</div>-->
                </div>
                <!-- 名字，头像，剩下的筹码 -->
                <div class="status__info--big">


                    <div style="position: relative;">
                        <div class="status__chat" style="
                        position: absolute;
                        top: -1rem;
                        right: 0;
                        display: none;
                        background-color: rgba(0, 0, 0, 0.5);
                        font-size: 0.6rem;
                        color:white;
                        padding: 0.2rem 0.5rem;
                        border-radius: 0.2rem;"></div>
                    </div>
                    <div class="status__name"></div>

                    <img class="status__avatar" src="./images/null.png" alt="">
                    <div class="status__chips--Leftover"></div>
                    <img onclick="submitStartGame()" class="status__dealer" src="./images/dealer.png" alt="">
                </div>
            </div>
            <div class="status status--9">
                <div class="status__info--small">

                    <div class="status__resume status__bet">下 注</div>
                    <div class="status__resume status__call">跟 注</div>
                    <div class="status__resume status__raise">加 注</div>
                    <div class="status__resume status__fold">弃 牌</div>
                    <div class="status__resume status__all-in">All in</div>
                    <div class="status__resume status__free">过 牌</div>
                    <div class="status__resume status__wait">等 待</div>
                    <div class="status__chips--invested">
                        <img class="status__icon" src="./images/texas_chip.png" alt="">
                        <span class="status__number"></span>
                    </div>
                </div>
                <div style="margin-left: 2.3rem;position: absolute;margin-top: -2.6rem;" id="8_flop">
                    <!--<div class="8_1_flop" style="font-size: 0.6rem;color: white;display: inline">33</div>
                    <div class="8_2_flop" style="font-size: 0.6rem;color: white;display: inline">44</div>-->
                </div>
                <!-- 名字，头像，剩下的筹码 -->
                <div class="status__info--big">


                    <div style="position: relative;">
                        <div class="status__chat" style="
                        position: absolute;
                        top: -1rem;
                        right: 0;
                        display: none;
                        background-color: rgba(0, 0, 0, 0.5);
                        font-size: 0.6rem;
                        color:white;
                        padding: 0.2rem 0.5rem;
                        border-radius: 0.2rem;"></div>
                    </div>
                    <div class="status__name"></div>

                    <img class="status__avatar" src="./images/null.png" alt="">
                    <div class="status__chips--Leftover"></div>
                    <img onclick="submitStartGame()" class="status__dealer" src="./images/dealer.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <!-- 下（自己） -->
    <div class="bottom my">
        <!-- 其他 -->
        <div class="guanliyuan" style="margin-bottom: 0.5rem; font-size: 0.75rem;color: white;text-align: center;display: none;">
            <button onclick="submitStartGame()" style="padding: 0.25rem; margin-right: 1rem; border: 1px solid #eee;border-radius: 0.2rem;">开始游戏</button>
            <button onclick="sc()"  style="padding: 0.25rem; border: 1px solid #eee; border-radius: 0.2rem;">结束游戏</button>
        </div>
        <div class="my__buttons">
            <button class="my__button my__autofold"
                    style="background-color:darkred;background-image: none;border-radius: 8px;"
                    onclick="submitAutoFold()">自动弃</button>
            <button class="my__button my__fold"
                    style="background-color:grey;background-image: none;border-radius: 8px;"
                    onclick="submitSetState('status__info--fold')">弃 牌</button>
            <button class="my__button my__nobuyIns"
                    style="background-color:grey;background-image: none;border-radius: 8px;" onclick="buyInsurance(Math.ceil(roomMsg.winInvest/roomMsg.winOdds),
                    roomMsg.winInvest,roomMsg.winOuts,'0')">放 弃</button>
            <button class="my__button my__raise"
                    style="background-color:green;background-image: none;border-radius: 8px;"
                    onclick="raise()">加 注</button>
            <button class="my__button my__bet"
                    style="background-color:green;background-image: none;border-radius: 8px;"
                    onclick="raise()">下 注</button>
            <button class="my__button my__cancel"
                    style="background-color:green;background-image: none;border-radius: 8px;"
                    onclick="submitNone()">取 消</button>
            <button class="my__button my__all-in"
                    style="background-color:yellowgreen;background-image: none;border-radius: 8px;"
                    onclick="submitSetState('status__info--all-in')">All in</button>
            <button class="my__button my__buyIns"
                    style="background-color:yellowgreen;background-image: none;border-radius: 8px;" onclick="buyInsurance(Math.ceil(roomMsg.winInvest/roomMsg.winOdds),
                    roomMsg.winInvest,roomMsg.winOuts,'1')">投 保</button>
            <button class="my__button my__free"
                    style="background-color:blue;background-image: none;border-radius: 8px;"
                    onclick="submitSetState('status__info--free')">过 牌</button>
            <button class="my__button my__autocheck"
                    style="background-color:darkred;background-image: none;border-radius: 8px;"
                    onclick="submitAutoCheck()">自动过</button>
            <button class="my__button my__checkfold"
                    style="background-color:darkred;background-image: none;border-radius: 8px;"
                    onclick="submitCheckFold()">让或弃</button>
            <button class="my__button my__call"
                    style="background-color:salmon;background-image: none;border-radius: 8px;"
                    onclick="submitSetState('status__info--call')">跟 注</button>
        </div>
        <style>
            .my__button {
                 display: none;
            }
        </style>
        <!-- 加注详情 -->
        <ul class="my__items--raise" style =' margin-top : -5rem;display: none;'>
            <li class="my__item--raise">
                <button class="my__button--raise" onclick="submitSetState('status__info--raise','1.3')">1.3</button>
                <div class="my__number--raise"></div>
            </li>
            <li class="my__item--raise">
                <button class="my__button--raise" onclick="submitSetState('status__info--raise','1.5')">1.5</button>
                <div class="my__number--raise"></div>
            </li>
            <li class="my__item--raise">
                <button class="my__button--raise" onclick="submitSetState('status__info--raise','2')">2</button>
                <div class="my__number--raise"></div>
            </li>
            <li class="my__item--raise">
                <button class="my__button--raise" onclick="submitSetState('status__info--raise','3')">3</button>
                <div class="my__number--raise"></div>
            </li>
            <li class="my__item--raise">
                <button class="my__button--raise" onclick="submitSetState('status__info--raise','5')">5</button>
                <div class="my__number--raise"></div>
            </li>

        </ul>

        <!-- 底牌 -->
        <div class="my__the-flop">
            <img onclick="showCard(0)" class="my__img--the-flop my__img--the-flop-1" src="" alt="">
            <img onclick="showCard(1)" class="my__img--the-flop my__img--the-flop-2" src="" alt="">
        </div>

        <!-- 个人信息 -->
        <div class="status status--1">
            <div style="margin-top: 0.8rem;position: absolute;" id="0_flop">
            </div>
            <!-- 名字，头像，剩下的筹码 -->
            <div class="status__info--big" >




                <!-- <div style="position: relative;">
                <div class="status__chat" style="
                position: absolute;
                top: -1rem;
                left: 0;
                display: none;
                background-color: rgba(0, 0, 0, 0.5);
                font-size: 0.6rem;
                color:white;
                padding: 0.2rem 0.5rem;
                border-radius: 0.2rem;"></div>
            </div> -->
                <div style="position: relative;">
                    <div class="status__chat" style="
                        position: absolute;
                        top: -1rem;
                        left: 0;
                        display: none;
                        background-color: rgba(0, 0, 0, 0.5);
                        font-size: 0.6rem;
                        color:white;
                        padding: 0.2rem 0.5rem;
                        border-radius: 0.2rem;">

                    </div>
                </div>

                <div class="status__name"></div>

                <img class="status__avatar" src="./images/null.png" alt="">
                <div class="status__chips--Leftover"></div>
                <img onclick="submitStartGame()" class="status__dealer" src="./images/dealer.png" alt="">
            </div>

            <!-- 概述，投入的筹码，庄家标准 -->
            <div class="status__info--small">

                <div class="status__resume status__bet">下 注</div>
                <div class="status__resume status__call">跟 注</div>
                <div class="status__resume status__raise">加 注</div>
                <div class="status__resume status__fold">弃 牌</div>
                <div class="status__resume status__all-in">All in</div>
                <div class="status__resume status__free">过 牌</div>
                <div class="status__resume status__wait">等 待</div>
                <div class="status__chips--invested">
                    <img class="status__icon" src="./images/texas_chip.png" alt="">
                    <span class="status__number"></span>
                </div>
            </div>
        </div>
    </div>

    <!-- footer -->
    <footer class="footer">
        <img src="./images/chat.png" style="height: 2rem;" onclick="chatSwitch()" alt="chat icon">
        <button class="chat__tag" style="margin-left: 10.5rem;margin-top: 0.4rem;" onclick="moneySwitch()">买入</button>
        <button class="chat__tag" style="margin-left: 12.5rem;margin-top: -3rem;position: relative;" onclick="publicInfoSwitch()">上局</button>

<!--
        <img src="./images/chat.png" style="height: 2rem;margin-left: -12.5%;margin-top: -9%;position: absolute;" onclick="publicInfoSwitch()" alt="chat icon">
-->
    </footer>

    <div class="chat" onclick="chatSwitch()">
        <div class="chat__content" onclick="chatStopPropagation(event)">
            <ul class="chat__items" style="height: 80vh;overflow: scroll;">
            </ul>
            <div class="chat__footer">
                <ul class="chat__tags">
                    <li class="chat__tag" onclick="chatCopy(event)">滑了</li>
                    <li class="chat__tag" onclick="chatCopy(event)">脏男孩</li>
                    <li class="chat__tag" onclick="chatCopy(event)">冷怂在这吸呢？</li>
                </ul>
                <input class="chat__input" type="text">
                <button class="chat__button" onclick="submitChat()">发送</button>
            </div>
            <style>
                .chat__items {
                    position: absolute;
                    top: 0.5rem;
                    bottom: 2rem;
                    text-align: right;
                    /* display: flex;
                align-items: flex-end; */
                }

                .chat__item {
                    margin-top: 0.5rem;
                    width: 9rem;
                }

                .chat__paragraph {
                    color: white;
                    font-size: 0.6rem;
                    line-height: 1.5rem;
                    font-weight: 700;
                }

                .chat__text {
                    display: inline-block;
                    vertical-align: top;
                    margin-right: 0.5rem;
                    width: 6rem;
                    /* height: 1.5rem; */
                    word-break: break-all;
                    font-size: 0.6rem;
                    line-height: 1.5rem;
                    color: white;
                    /* white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis; */
                }

                .chat__avatar {
                    display: inline-block;
                    vertical-align: top;
                    border-radius: 0.2rem;
                    width: 1.5rem;
                    height: 1.5rem;
                }
            </style>
        </div>
    </div>

    <!--wlData-->
    <div class="roomInfo" onclick="showRoomInfo()">
        <div class="roomInfo__content" style="width: 12rem;" onclick="roomStopPropagation(event)">
            <ul class="chat__items" style="height: 80vh;overflow: scroll;">
            </ul>
            <table id="tabData">
            </table>
        </div>
    </div>

    <!--购物车信息-->
    <div class="moneyList">
        <ul style="margin-left: 20%;margin-top: -10%;width: 90%;">
            <li class="chat__tag">
                <button onclick="submitBuyin('1')">1000</button>
            </li>
            <li class="chat__tag">
                <button onclick="submitBuyin('2')">2000</button>
            </li>
            <li class="chat__tag">
                <button onclick="submitBuyin('6')">5000</button>
            </li>
        </ul>
    </div>

    <!--publicInfo-->
    <div class="publicInfo" onclick="publicInfoSwitch()">
        <div class="publicInfo__content" onclick="roomStopPropagation(event)">
            <ul class="chat__items" style="height: 80vh;overflow: scroll;">
            </ul>
            <div>
                <ul class="center__items--img">
                    <li class="public__item--img"><img class="public__center__img" src="" alt=""></li>
                    <li class="public__item--img"><img class="public__center__img" src="" alt=""></li>
                    <li class="public__item--img"><img class="public__center__img" src="" alt=""></li>
                    <li class="public__item--img"><img class="public__center__img" src="" alt=""></li>
                    <li class="public__item--img"><img class="public__center__img" src="" alt=""></li>
                </ul>
            </div>
            <div>
                <table id="publicTab" style="margin-top: 25%;">

                </table>
            </div>
            <div style="margin-top: 25%;margin-left: 10%;">
                <div style='font-size: 0.6rem;color: white;display: inline;' id="winName"></div><br/>
                <img class="win_img" src="" alt="">
                <img class="win_img" src="" alt="">
                <div style='font-size: 0.6rem;color: white;display: inline;position: absolute;margin-top: 7%;' id="winPot"></div>
            </div>
        </div>
    </div>
    <script>
        window.onload = function (){
           /*this.loadingwinOuts();
           this.loadingShowflop();
            this.loadingLastFlop();*/
        }

        //初始化winOuts


        //初始化lastFlop

        function chatSwitch() {
            document.getElementsByClassName('chat')[0].style.display === 'block' ?
                document.getElementsByClassName('chat')[0].style.display = 'none' :
                document.getElementsByClassName('chat')[0].style.display = 'block';
        };

        function showRoomInfo(){
            document.getElementsByClassName('roomInfo')[0].style.display === 'block' ?
                document.getElementsByClassName('roomInfo')[0].style.display = 'none' :
                document.getElementsByClassName('roomInfo')[0].style.display = 'block';
        }


        //购物车点击按钮
        function moneySwitch(){
            document.getElementsByClassName('moneyList')[0].style.display === 'block' ?
                document.getElementsByClassName('moneyList')[0].style.display = 'none' :
                document.getElementsByClassName('moneyList')[0].style.display = 'block';
        }
        //退出按钮
        function exitfoSwitch(){
            var color = document.getElementById("btnExit").style.color;
            if(color == "white" || color == ""){
                document.getElementById("btnExit").style.color = "grey"
                submitLeave()
            }else {
                document.getElementById("btnExit").style.color = "white"
                submitBack()
            }
            //document.getElementById("btnExit").style.color = "grey";
            console.log(document.getElementById("btnExit").style.color);
        }
        //公共牌弹框点击
        function publicInfoSwitch(){
            document.getElementsByClassName('publicInfo')[0].style.display === 'block' ?
                document.getElementsByClassName('publicInfo')[0].style.display = 'none' :
                document.getElementsByClassName('publicInfo')[0].style.display = 'block';
        }

        //公共牌中的按钮点击
        function publicTabBtn(){
            alert("弹框");
        }
        function chatStopPropagation(event) {
            event.stopPropagation();
        }
        function moneyClick(data){
            alert(data);
        }

        function roomStopPropagation(event) {
            event.stopPropagation();
        }
    </script>
    <style>
        .chat {
            display: none;
            width: 16rem;
            margin: 0 auto;
            position: fixed;
            z-index: 10000000000000;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }

        .chat__content {
            position: fixed;
            top: 0;
            bottom: 0;
            padding: 0.5rem;
            background-color: #333;
            width: 9rem;
        }
        .roomInfo {
            display: none;
            width: 16rem;
            margin: 0 auto;
            position: fixed;
            z-index: 10000000000000;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
        .roomInfo__content {
            position: fixed;
            top: 0;
            bottom: 0;
            padding: 0.5rem;
            background-color: #333;
            width: 9rem;
        }
        .publicInfo {
            display: none;
            width: 16rem;
            margin: 0 auto;
            position: fixed;
            z-index: 10000000000000;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
        .publicInfo__content {
            position: fixed;
            top: 0;
            bottom: 0;
            padding: 0.5rem;
            background-color: #333;
            width: 9rem;
        }
        .moneyList {
            display: none;
        }
        .public__item--img {
            display: inline-block;
            width: 1.5rem;
            margin: 0 0.1rem;
        }
        .public__center__img {
            width: 1.6rem;
        }
        .win_img {
            display: inline-block;
            width: 1.5rem;
            margin: 0 0.1rem;
        }
        .outsImg {
            width: 23px;
        }
        .flop_img {
            width: 23px;
        }
        table {
            display: flex;
            justify-content: space-between;
        }

        .button-container {
            display: flex;
            justify-content: center;
        }
        .chat__footer {
            position: absolute;
            bottom: 0.5rem;
        }

        .chat__tags {
            padding: 0.2rem 0rem;
        }

        .chat__tag {
            margin-right: 0.5rem;
            margin-bottom: 0.3rem;
            display: inline-block;
            vertical-align: top;
            border: 1px solid #eee;
            font-size: 0.6rem;
            color: white;
            padding: 0.2rem 0.5rem;
            border-radius: 0.2rem;
        }

        .room__tag {
            /*margin-right: 0.5rem;
            margin-bottom: 0.3rem;
            display: inline-block;
            vertical-align: top;
            border: 0;
            border-radius: 0.2rem;*/
            text-align: center;
            font-size: 0.6rem;
            color: white;
            padding: 0.2rem 0.5rem;
        }

        .chat__input {
            margin-right: 0.5rem;
            padding: 0;
            border: 0;
            border-radius: 0.1rem;
            width: 6rem;
            height: 1rem;
            font-size: 0.7rem;
            font-weight: 700;
            text-indent: 0.2rem;
        }

        .chat__button {
            color: white;
            background-color: cornflowerblue;
            border-radius: 0.1rem;
            width: 2.5rem;
            height: 1rem;
            font-size: 0.7rem;
            font-weight: 700;
        }

        .status__chat {
            white-space: nowrap;
            max-width: 4rem;
            overflow: scroll;
        }

        .status__chat p {
            white-space: nowrap;
            animation: scrolling 5s linear infinite;
        }
        .raise_div{
            width: 1.6rem;
            height: 1.6rem;
            border-radius: 50%;
            background-color: rgba(72,128,251);
            line-height: 8px;
            color: white;
        }
        .bb{
            font-size: 12px;
        }
        .spn_pot{
            color: white;
            font-size: 12px;
        }

        @keyframes scrolling {
            from {
                transform: translateX(100%);
                /* 滚动结束位置 */
            }

            to {
                transform: translateX(-100%);
                /* 滚动起始位置 */
            }
        }
    </style>

    <div>

    </div>
</div>
</body>

</html>
